<template>
  <div class=" w-full h-full">
    <div class="top flex-center">
      <div class="w-1/2 " style="margin-left: 1rem;">
        <el-input placeholder="输入项目名称进行查询" style="height: 40px">
          <template #append> <el-button icon="Search" /></template>
        </el-input>
      </div>
      <div class="w-1/2  flex-left  pl-8">
        <el-select v-model="value" placeholder="选择已建项目" style="width: 350px;" clearable size="large">
          <el-option label="Options1" value="1" />
          <el-option label="Options2" value="2" />
        </el-select>
        <el-button style="margin-left: 10rem;" size="large">新建项目</el-button>
      </div>
    </div>

    <div class="content ">
      <div class="content__card ">
        <user-projectcard></user-projectcard>

      </div>
    </div>

  </div>
</template>

<script lang="ts" setup>
definePageMeta({
  layout: 'mangment'
})
const value = ref('')
</script>

<style lang="scss" scoped>
@mixin block($block) {
  .#{$block} {
    @content;
  }
}

@mixin element($element) {
  &__#{$element} {
    @content;
  }
}

@mixin modifier($modifier) {
  &--#{$modifier} {
    @content;
  }
}

@include block(top) {
  width: 100%;
  height: 86px;

}

@include block(content) {
  width: 100%;
  height: 90%;

  @include element(card) {
    width: 100%;
    @apply p-4;
    margin-top: -1rem;

  }
}


</style>